<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>额外的 ref 解包细节</title>
    <script src="../public/vue_3.2.36.js"></script>
  </head>
  <body>
    <div id="app">
        <h1>在模板中解包的注意事项</h1>
        <h2>在模板渲染上下文中，只有顶级的 ref 属性才会被解包。
            在下面的例子中，count 和 object 是顶级属性，但 object.id 不是：</h2>
        <p>count:{{count}} //这个表达式按预期工作</p>
        <p>object.id+1:{{object.id+1}} //渲染的结果将是 [object Object]1，因为在计算表达式时 object.id 没有被解包，仍然是一个 ref 对象。</p>
        <p>id + 1:{{ id + 1 }}</p>
        <p>object.id:{{object.id}} //另一个需要注意的点是，如果 ref 是文本插值的最终计算值 (即 {\{ }\} 标签)，那么它将被解包，因此以下内容将渲染为 1</p>
        <h3>上面的这个特性仅仅是文本插值的一个便利特性，等价于 {\{ object.id.value }\}。</h3>
    </div>
    <script>
      const { ref, createApp, reactive } = Vue;

      /* 一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说，它的行为就像一个普通的属性： */
      const count = ref(0);
      const state = reactive({
        count, //count:ref(0)
      });
      console.log(state.count); // 0
      state.count = 1;
      console.log(count.value); // 1

      /* 如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref： */
      const otherCount = ref(2);
      state.count = otherCount;
      console.log(state.count); // 2
      // 原始 ref 现在已经和 state.count 失去联系
      console.log(count.value); // 1

      /* ​与 reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型(如 Map) 中的元素被访问时，它不会被解包： */
      const books = reactive([ref("Vue 3 Guide")]);
      // 这里需要 .value
      console.log(books[0].value);
      const map = reactive(new Map([["count", ref(0)]]));
      // 这里需要 .value
      console.log(map.get("count").value);

      /* 在模板中解包的注意事项: */
      const app=createApp({
        setup() {
            const count = ref(0)
            const object = { id: ref(1) }
            const { id } = object
            return {count,object,id}
        }
      })
      app.mount("#app")
    </script>
  </body>
</html>
